<template>
  <div id="inspection-container">
    <show-screen  :sum="showNumber" :datas="showList" :autoplay="swiperStatus" />
    <controler
      :swiperStatus="swiperStatus"
      @changSwiperStatus="changSwiperStatus"
      :currentShow="showNumber"
      @changeShow="changeShow"
    />
  </div>
</template>

<script>
import controler from './controler.vue'
import showScreen from './showScreen.vue'
export default {
  name: 'inspection',
  components: {
    controler,
    showScreen
  },
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      showNumber: 9,
      showStart: 0,
      swiperStatus: true
    }
  },
  computed: {
    showList () {
      return this.list.map((item, index) => ({ ...item, id: 'video' + index }))
    }
  },
  methods: {
    changSwiperStatus (newStatus) {
      this.swiperStatus = newStatus
    },
    changeShow (newNumber) {
      this.showNumber = newNumber
    }
  },
  updated () {
    if (this.showList.length < 2) this.showNumber = 1
  }
}
</script>

<style scoped>
#inspection-container {
  position: relative;
}
</style>
